<template>
	<a-form @submit="handleSubmit" :form="form" class="form" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
		<a-row class="form-row">
			<a-col :xl="{span: 6}">
				<a-form-item label="联系人">
					<p>张三</p>
					<a-input aria-placeholder="请输入联系人" v-model="form.people" />
				</a-form-item>
			</a-col>
			<a-col :xl="{span: 6}">
				<a-form-item label="联系电话">
					<p>020-89814314</p>
					<a-input v-model="form.contact_tel" />
				</a-form-item>
			</a-col>
			<a-col :xl="{span: 6}">
				<a-form-item label="推广模式">
					<p>线下</p>
					<a-input v-model="form.type" />
				</a-form-item>
			</a-col>
			<a-col :xl="{span: 6}">
				<a-form-item label="推广类型">
					<p>企业</p>
					<a-input v-model="form.user_type" />
				</a-form-item>
			</a-col>
		</a-row>
		<a-row class="form-row">
			<a-col :lg="6" :md="12" :sm="24">
				<a-form-item label="推广级别">
					<p>张三</p>
					<el-select v-model="value" placeholder="请选择">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</a-form-item>
			</a-col>
			<a-col :lg="6" :md="12" :sm="24">
				<a-form-item label="推广城市">
					<p>张三</p>
					<!-- <a-cascader v-model:value="value" :options="options" placeholder="Please select" /> -->
				</a-form-item>
			</a-col>
			<a-col :lg="6" :md="12" :sm="24">
				<a-form-item label="邀请码">
					<p>张三</p>
					<a-input v-model="form.code" />
				</a-form-item>
			</a-col>
			<a-col :lg="6" :md="12" :sm="24">
				<a-form-item label="分成率">
					<p>张三</p>
					<a-input v-model="form.rate" />
				</a-form-item>
			</a-col>
		</a-row>
		<a-form-item v-if="showSubmit">
			<a-button htmlType="submit">Submit</a-button>
		</a-form-item>
	</a-form>
</template>

<script>
	export default {
		name: 'RepositoryForm',
		// props: ['showSubmit'],
		props: {
			tabelData: {
				type: Object,
				default: () => ({})
			},
			showSubmit: {
				type: Boolean,
				default: false
			}
		},
		i18n: require('./i18n-repository'),
		data() {
			return {
				form: {
					people: '',
					contact_tel: '',
					type: '',
					user_type: '',
					level: '',
					area_id: '',
					code: '',
					rate: ''
				},
				options: [{
					value: '选项1',
					label: '一级'
				}, {
					value: '选项2',
					label: '二级'
				}],
				value: '',

			}
		},
		mounted() {
			console.log(this.tabelData);
			// for (const key in this.tabelData) {
			// 	console.log(this.tabelData[key]);
			// 	this.form[key] = this.tabelData[key]
			// }
			// console.log(this.form);
		},
		created() {
			console.log(this.tabelData);
		},
		methods: {
			handleSubmit(e) {
				e.preventDefault()
				this.form.validateFields((err, values) => {
					if (!err) {
						console.log('Received values of form: ', values)
					}
				})
			},
			validate(rule, value, f) {
				if (value !== undefined && value !== 'iczer') {
					f('输入\'iczer\'试下？')
				}
				f()
			}
		}
	}
</script>

<style lang="less" scoped>
	.form {
		.form-row {
			margin: 0 -8px
		}

		.ant-col-md-12,
		.ant-col-sm-24,
		.ant-col-lg-6,
		.ant-col-lg-8,
		.ant-col-lg-10,
		.ant-col-xl-8,
		.ant-col-xl-6 {
			padding: 0 8px
		}
	}
</style>
